<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.myDiv{
				width: 200px;
				height: 30px;
				line-height: 30px;
				border: 1px solid #666;
				background: #c2ff68;
				color: #000;
				display: inline-block;
				border-radius: 5px;
				text-align: center;
			}
		
			.contont{
				width: 100px;
				height: 30px;
				border: 1px solid #666;
				position: absolute;
				border-radius: 5px;
				color: #FFFFFF;
				background: #666;
				text-align: center;
				line-height: 30px;
				font-style: normal;
				display: none;
			}
			.myspan-bottom{
				border:5px solid;
				border-color: transparent transparent #666;
				position: absolute;
				top:-11px;
				left: 50%;
				
			}
			.myspan-top{
				border:5px solid;
				position: absolute;
				top: 31px;
				left: 40px;
				border-color: #666 transparent transparent ;
			}
			.myspan-left{
				border:5px solid;
				position: absolute;
				top: 8px;
   	 			left: 100px;
   	 			border-color: transparent transparent transparent #666 ;
			}
			.myspan-right{
				border:5px solid;
				position: absolute;
				top: 9px;
    			left: -11px;
    			border-color: transparent #666 transparent transparent;
			}
		</style>
	</head>
	<body>
		<div class="myDiv bottom-tip" data-tip="下边提示1">提示1</div>
		<div class="myDiv left-tip" data-tip="左边提示2">提示2</div>
		<div class="myDiv right-tip" data-tip="右边提示3">提示3</div>
		<hr>
		<hr>
		<hr>
		<div class="myDiv top-tip" data-tip="顶部提示4">提示4</div>
		<div class="myDiv right-tip" data-tip="右边提示5">提示5</div>
		<div class="myDiv bottom-tip" data-tip="底部提示6">提示6</div>
		
		<div class="contont">
			<span></span>
			<i></i>
		</div>
		
		<script src="../biaodan exercise/jquery-1.12.0.js"></script>
		<script>
			!function(){
				var $myDiv = $('.myDiv'), $contont = $('.contont')
			$myDiv
				.on('mouseover',function(){
					var $this = $(this),
						top = $this.offset().top,
						left = $this.offset().left,
						height = $this.height(),
						width = $this.width();
						var datp = $this.attr('data-tip');
						//定义一个自定义属性赋值给提示框，让提示框的内容为自定义的属性值
						$contont.find('i').html(datp);
						
						//底部提示
						if ($this.hasClass('bottom-tip')) {//增加class 
							$contont.show()
							$contont.css({//底部提示框
								top : top + height + 10,
								left : left + width /2 - $contont.outerWidth() / 2
							})
							$contont.find('span').addClass('myspan-bottom')//底部提示小三角
							
							//顶部提示
						} else if ($this.hasClass('top-tip')) {//增加class 顶部提示小三角
							$contont.show()
							$contont.css({//顶部提示框
								top : top - height - 10,
								left : left + width /2 - $contont.outerWidth() / 2
							})
							$contont.find('span').addClass('myspan-top')//顶部提示小三角
							
						//左侧提示
						} else if ($this.hasClass('left-tip')) {//增加class 左侧提示小三角
							$contont.show()
							$contont.css({//左侧提示框
								top : top,
								left : left - $contont.width() - 10  //width /2 + 12
							})
							$contont.find('span').addClass('myspan-left')//左侧提示小三角
							
							//右侧提示
						} else{
							$contont.show()
							$contont.css({//右侧提示框
								top : top,
								left : left + width + 10  //width /2 + 12
							})
							$contont.find('span').addClass('myspan-right')//右侧提示小三角							
						}
				})
				.on('mouseout',function(){//绑定鼠标移除事件清除span的class
					$contont.find('span').removeClass()
					$contont.hide()//提示框隐藏
				})
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
//				var $show = $('.show'), $contont = $('.contont');
//				$show.on('mouseover',function(){
//					var $this = $(this),
//					top = $this.offset().top,
//					
//					left = $this.offset().left,
//					height = $this.height(),
//					width = $this.width(),
//					title = $this.html();
//					console.log(top)
//					$contont.html(title + '我在你下边')
//					
//					$contont.css({
//						top : top + height + 6,
//						left : left + width /2 - $contont.outerWidth() / 2
//					})
//					
//					$contont.show();
//				}).on('mouseout',function(){
//					$contont.hide();
//				})
				
				
			}();
		</script>
		
	</body>
</html>
